<template>
    <div v-if="show1">
        <el-row>
            <el-col :span="24">
                <el-row style="text-align: left; margin: 10px 0">
                    <el-col :span="7">ID:<el-input v-model="search.id" style="width: 240px" placeholder="请输入ID" clearable /></el-col>
                    <el-col :span="7">用户:<el-input v-model="search.user" style="width: 240px" placeholder="请输入用户" clearable /></el-col>
                    <el-col :span="10">
                        <div class="block">
                            创建时间：
                            <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :dayi="dayi" />
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="find()">搜索</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-col style="text-align: left; margin: 0 0 10px 0"><el-button type="primary" #default="scope" @click="add(scope)">新增心理答疑</el-button></el-col>
            <el-col>
                <el-table :data="arrayList" border style="width: 80%">
                    <el-table-column prop="id" label="ID" align="center" label-class-name="header" />
                    <el-table-column prop="user" label="用户" align="center" label-class-name="header" />
                    <el-table-column prop="title" label="标题" align="center" label-class-name="header" />
                    <el-table-column prop="time" label="时间" align="center" label-class-name="header" />
                    <el-table-column label="操作" align="center" label-class-name="header">
                        <template #default="scope">
                            <el-button type="text" @click="remove(scope)">删除</el-button>
                            <el-button type="text" @click="change(scope)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next" :total="10">
                </el-pagination>
            </el-col>
            <el-dialog v-model="show" :title="title" width="600" style="text-align: left">
                <ShanChu :key2="dayi.id" v-if="title == '提示'" :dayi="dayi" @delate="Delate"></ShanChu>
                <XinZeng v-else @add="Add"></XinZeng>
            </el-dialog>
        </el-row>
    </div>
    <div v-else>
        <DaYiItem :ids="dayi" @change2="Change"></DaYiItem>
    </div>
</template>

<script setup>
    import axios from "axios";
    import { onMounted, ref, reactive } from "vue";
    import qs from "qs";
    import { format } from "date-fns";
    import ShanChu from "./components/ShanChu";
    import XinZeng from "./components/XinZeng.vue";
    import DaYiItem from "./DaYiItem.vue";
    let show = ref(false);
    let arrayList = ref([]);
    let title = ref("");
    let dayi = ref();
    let show1 = ref(true);
    async function start() {
        let res = await axios.get("http://localhost:8080/dayi/select4");
        console.log(res);
        arrayList.value = res.data.data;
        console.log(arrayList.value[1].time);
        for (let index = 0; index < arrayList.value.length; index++) {
            const element = arrayList.value[index].time;
            const date = new Date(element);
            arrayList.value[index].time = `${date.getFullYear()}-${(
                date.getMonth() + 1
            )
                .toString()
                .padStart(2, "0")}-${date
                .getDate()
                .toString()
                .padStart(2, "0")} ${date
                .getHours()
                .toString()
                .padStart(2, "0")}:${date
                .getMinutes()
                .toString()
                .padStart(2, "0")}`;
        }
        console.log(arrayList.value[1].time);
    }
    onMounted(function () {
        start();
    });
    const Delate = async function (data) {
        console.log(data);

        if (data) {
            await axios.post(
                "http://localhost:8080/dayi/delete",
                qs.stringify({
                    ...data
                })
            );
            let index = arrayList.value.findIndex((item) => item.id == data.id);
            arrayList.value.splice(index, 1);
        }
        show.value = false;
        start();
    };
    const Add = async function (data) {
        if (data) {
            await axios.post(
                "http://localhost:8080/dayi/add",
                qs.stringify({
                    ...data
                })
            );
        }
        show.value = false;
        start();
    };
    const remove = function (value) {
        console.log(value);
        title.value = "提示";
        dayi.value = value.row;

        show.value = true;
    };
    const add = function () {
        show.value = true;
        title.value = "新增";
    };
    const change = function (value) {
        show1.value = false;
        dayi.value = value.row.id;
        console.log(dayi);
    };
    const Change = function () {
        show1.value = true;
    };
    const search = reactive({
        id: "",
        user: "",
        time: ""
    });

    let find = async function () {
        console.log(search.time);
        let st = "";
        let end = "";
        st = format(search.time[0], "yyyy-MM-dd") + "+00:00:00";
        end = format(search.time[1], "yyyy-MM-dd") + "+00:00:00";
        console.log(st);
        let res = await axios.get(
            `http://localhost:8080/dayi/show?${search.id}&${search.user}&${st}&${end}`
        );
        console.log(res);
        arrayList.value = res.data.data.list;
    };
</script>

<style lang="less" scoped>
</style>